<template>
  <div style="height:100%; background: #03044A;">
    <BgAnimate v-if="isMasterPage"/>
      <div class="header">
          <div class="header-item"></div>
          <div class="header-item header-title">
              大数据可视化平台
          </div>
          <div class="header-item">
              <span class="currentTimeStyle">{{currentTime}}</span>
          </div>
      </div>
      <div class="page">
          <router-view ></router-view>
      </div>

  </div>
</template>

<script>
import { NextLoading } from '/@/utils/loading';
import BgAnimate from './BgAnimate.vue'
import { useRoute } from 'vue-router';
export default {
  components: {
      BgAnimate
  },
  computed:{
    isMasterPage:()=>{

    }
  },
  computed: {
      isMasterPage() {
        console.log("this.$route.path",this.$route.path);
          return this.$route.path.includes('visualizingmaster');
      }
  },
  data() {
      return {
          resizeFn: null,
          currentTime:this.formatDate(new Date())
      }
  },
  mounted() {
    const route = useRoute();
    console.log("route",route);
    NextLoading.done();
      window.addEventListener('resize', this.resizeFn);
      setInterval(() => {
    this.currentTime = this.formatDate(new Date())
  }, 1000);
  },
  methods: {
      formatDate(date) {
          const year = date.getFullYear();
          const month = (date.getMonth() + 1).toString().padStart(2, '0');
          const day = date.getDate().toString().padStart(2, '0');
          const hours = date.getHours().toString().padStart(2, '0');
          const minutes = date.getMinutes().toString().padStart(2, '0');
          const seconds = date.getSeconds().toString().padStart(2, '0');
          return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
      }
  },
}
</script>

<style lang="less">

.header {
  height: 80px;
  background: #03044A;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: url('/@/assets/head_bg.png') repeat center center;
  margin-bottom: 10px;
  &-title {
      color: #75deef;
      font-size: 40px;
      letter-spacing: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
  }

  .header-item {
      flex: 1;
      height: 100%;
      width: 20%;

  }
}

.page {
  height: calc(100% - 90px);
}
.currentTimeStyle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 23px;
  color: #75deef;
}
</style>
